@import "bootstrap/bootstrap.less";
@import "border-box.less";
@import "override.less";

/*****************************************************************************
 * Mixins
 */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.top-radius(@radius) {
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  border-top-right-radius: @radius;
  border-top-left-radius: @radius;

}

/*****************************************************************************
 * Whole page
 */
html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 90%;
  #gradient > .vertical(rgb(0, 174, 194), rgb(1, 143, 163));
  background-repeat: no-repeat;
  background-attachment: fixed;
}

input[type=text] {
  height: 30px;
}

// fonts
html, body, input, textarea, button {
  font: 13px/1.6 Lucida Grande,sans-serif;
}

textarea {
  height: 50px;
}

.white-text {
  color: @white;
}

a {
  color: @gray;
  text-decoration: none;
}

/*****************************************************************************
 * Style wrapper and elements
 */
.wrapper {
  position: relative;
  margin: 50px auto 20px auto;
  width: 950px;
  .box-shadow(7px 7px 7px rgba(0,0,0,.25));
}

.top-bar {
  padding: 10px 10px 10px 10px;
  height: 40px;
  .top-radius(8px);
  #gradient > .vertical(rgb(110,110,118), rgb(50, 50, 57));
}

.bottom-bar {
  padding: 10px 10px 10px 10px;
  height: 20px;
  #gradient > .vertical(rgb(110,110,118), rgb(50, 50, 57));
}

.sb-email, .sb-logout {
  float: right;
}

.sb-logout {
  padding-left: 10px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: black;
}

.main-content {
  padding: 30px 10px 30px 10px;
  background-image: url('/assets/img/purty_wood.png');
  background-repeat: repeat;
}

.sb-controls {
  .border-radius(8px);
  float: left;
  height: 300px;
  width: 250px;
  background: rgb(242,242,242);
  margin-left: 20px;
  .box-shadow(7px 7px 7px rgba(0,0,0,.25));
}

.sb-content {
  float: right;
  padding-right: 10px;
}

/*****************************************************************************
 * Menu
 */
// whole menu
.menu {
  .border-radius(5px);
  list-style: none;
  margin: 0px;
  padding: 0px;
}

// Style the row
.menu li {
  height: 40px;
  #gradient > .vertical(rgb(255,255,255), rgb(244,244,244));
  border-bottom-style: solid;
  border-bottom-color: darken(#eee,8%);
  border-bottom-width: 1px;
  position: relative;
  display: block;
}

// Style links inside row: block display so it expand to full row
.menu li a {
  text-decoration: none;
  display: block;
  height:100%;
  width:100%;
  border-top-width: 10px;
  cursor: pointer;
  display:block;
  text-indent: 10px;
  padding-top: 10px;
  color: @gray;
}

// First row will have top radius
.menu li:first-child {
  .top-radius(5px);
}
// Change color when row is active
.menu li.active a {
  color: @white;
}

// Change color when hover link
.menu li a:hover {
  #gradient > .vertical(rgb(240,240,240), rgb(230,230,230));
}

// Change color to blue for active row
.menu li.active {
  #gradient > .vertical(rgb(55,156,224), rgb(32,108,168)); 
}

// Don't change to gray color for the active link
.menu li.active a:hover {
  #gradient > .vertical(rgb(55,156,224), rgb(32,108,168)); 
}

// Keep top radius when hover link
.menu li:first-child a:hover {
  .top-radius(5px);
}

/*****************************************************************************
 * Papers
 */
.papers {
  position: relative;
  padding: 20px;
  background: url('/assets/img/small_tiles.png');
  box-shadow:
    0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
    0 8px 0 -5px #eee, /* The second layer */
    0 8px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
    0 15px 0 -10px #eee, /* The third layer */
    0 15px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

// table specifics
.wrap-txt {
  table-layout:fixed;
}

.wrap-txt .td-wrap-txt {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    word-wrap: break-word;
}

.new-bill {
  width: 570px;
}

.paid-status {
  width: 100%;
}

.paid-table {
  width:50%;
  margin: 0px;
  padding:0px;
  border-color: @grayLighter;
  border-width: 1px;
  border-style: solid;
}


.paid, .unpaid {
  border-top-style: solid;
  border-top-width: 5px;
}

.paid {
  border-top-color: green;
}

.unpaid {
  border-top-color: red;
}

.bill-amount {
  font-size: 18px;
}
.close-bill {
  position: absolute;
  top: 5px;
  right: 5px;
}
.close-bill:hover {
  cursor: pointer;
}
